<template>
  <div class="card">
    <div>
      <a-select v-model="formData.search.channel_id" class="select" :allowClear="true" placeholder="请选择通道">
        <a-select-option v-for="item in planType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-select
        class="select"
        v-model="formData.search.channel_type"
        @change="onChange"
        :allowClear="true"
        placeholder="请选择通道类型"
      >
        <a-select-option v-for="item in channelType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-button type="primary" @click="getList">查询</a-button>
      <a-button @click="reset">重置</a-button>
      <a-button type="danger">批量修改费率</a-button>
    </div>
    <a-table
      :rowKey="(record, index) => index"
      :pagination="{
        pageSize: formData.page_size,
        pageSizeOptions: ['20', '30', '40', '50'],
        size: 'small',
        showSizeChanger: true,
        showQuickJumper: true,

        total: total,
        current: formData.page,
        showTotal: total => `共 ${total} 条`
      }"
      @change="paginChange"
      :row-selection="rowSelection"
      style="margin-top: 10px; border: 1px solid #e8e8e8"
      show-size-changer
      show-quick-jumper
      :loading="loading"
      :data-source="tableData"
      :columns="columns"
    >
      <div slot="bank" slot-scope="text, record">
        <a-dropdown>
          <a-menu slot="overlay">
            <a-menu-item v-for="item in record.banks" :key="item.bank_id">
              <span>{{ item.bank_name }}</span>
              <span style="margin-left: 10px">{{ item.trade_rate }}</span>
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> 查看支持银行 <a-icon type="down" /> </a-button>
        </a-dropdown>
      </div>
      <div slot="16" slot-scope="text, record">
        <div class="info" style="margin-bottom: 5px">
          <span>费率：</span
          ><a-input
            v-model="record.level_rate_16"
            @blur="editList(16, record.level_fee_16, record.level_rate_16, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
        <div class="info">
          <span>笔数费：</span
          ><a-input
            v-model="record.level_fee_16"
            @blur="editList(16, record.level_fee_16, record.level_rate_16, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
      </div>
      <div slot="15" slot-scope="text, record">
        <div class="info" style="margin-bottom: 5px">
          <span>费率：</span
          ><a-input
            v-model="record.level_rate_15"
            @blur="editList(15, record.level_fee_15, record.level_rate_15, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
        <div class="info">
          <span>笔数费：</span
          ><a-input
            v-model="record.level_fee_15"
            @blur="editList(15, record.level_fee_15, record.level_rate_15, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
      </div>
      <div slot="14" slot-scope="text, record">
        <div class="info" style="margin-bottom: 5px">
          <span>费率：</span
          ><a-input
            v-model="record.level_rate_14"
            @blur="editList(14, record.level_fee_14, record.level_rate_14, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
        <div class="info">
          <span>笔数费：</span
          ><a-input
            v-model="record.level_fee_14"
            @blur="editList(14, record.level_fee_14, record.level_rate_14, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
      </div>
      <div slot="13" slot-scope="text, record">
        <div class="info" style="margin-bottom: 5px">
          <span>费率：</span
          ><a-input
            v-model="record.level_rate_13"
            @blur="editList(13, record.level_fee_13, record.level_rate_13, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
        <div class="info">
          <span>笔数费：</span
          ><a-input
            v-model="record.level_fee_13"
            @blur="editList(13, record.level_fee_13, record.level_rate_13, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
      </div>
      <div slot="12" slot-scope="text, record">
        <div class="info" style="margin-bottom: 5px">
          <span>费率：</span
          ><a-input
            v-model="record.level_rate_12"
            @blur="editList(12, record.level_fee_12, record.level_rate_12, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
        <div class="info">
          <span>笔数费：</span
          ><a-input
            v-model="record.level_fee_12"
            @blur="editList(12, record.level_fee_12, record.level_rate_12, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
      </div>
      <div slot="11" slot-scope="text, record">
        <div class="info" style="margin-bottom: 5px">
          <span>费率：</span
          ><a-input
            v-model="record.level_rate_11"
            @blur="editList(11, record.level_fee_11, record.level_rate_11, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
        <div class="info">
          <span>笔数费：</span
          ><a-input
            v-model="record.level_fee_11"
            @blur="editList(11, record.level_fee_11, record.level_rate_11, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
      </div>
      <div slot="10" slot-scope="text, record">
        <div class="info" style="margin-bottom: 5px">
          <span>费率：</span
          ><a-input
            v-model="record.level_rate_10"
            @blur="editList(10, record.level_fee_10, record.level_rate_10, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
        <div class="info">
          <span>笔数费：</span
          ><a-input
            v-model="record.level_fee_10"
            @blur="editList(10, record.level_fee_10, record.level_rate_10, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
      </div>
      <div slot="9" slot-scope="text, record">
        <div class="info" style="margin-bottom: 5px">
          <span>费率：</span
          ><a-input
            v-model="record.level_rate_9"
            @blur="editList(9, record.level_fee_9, record.level_rate_9, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
        <div class="info">
          <span>笔数费：</span
          ><a-input
            v-model="record.level_fee_9"
            @blur="editList(9, record.level_fee_9, record.level_rate_9, record.channel_id)"
            size="small"
            class="inputStyle"
          ></a-input>
        </div>
      </div>
    </a-table>
  </div>
</template>

<script>
import { getPlanAPI } from '@/api/transaction.js'
import { getChannelAPI, getListInfoAPI, editListInfoAPI } from '@/api/channel.js'
export default {
  name: 'RateList',
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.select_rows = selectedRows
        }
      }
    }
  },

  data() {
    return {
      selectedRowKeys: [],
      select_rows: [],
      total: 0,
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          channel_id: undefined,
          channel_type: undefined
        }
      },
      columns: [
        {
          title: '通道名称',
          dataIndex: 'channel_name',
          align: 'center',
          fixed: true
        },
        {
          title: '通道编码',
          dataIndex: 'channel_code',
          align: 'center',
          fixed: true
        },
        {
          title: '基础费率',
          dataIndex: 'base_rate',
          align: 'center',
          fixed: true
        },
        {
          title: '支持银行',
          align: 'center',
          fixed: true,
          scopedSlots: { customRender: 'bank' }
        },
        {
          title: '平台账户',
          align: 'center',
          width: '200px',
          scopedSlots: { customRender: '16' }
        },
        {
          title: '合伙人',
          align: 'center',
          width: '200px',
          scopedSlots: { customRender: '15' }
        },
        {
          title: '合伙人',
          align: 'center',
          width: '200px',
          scopedSlots: { customRender: '14' }
        },
        {
          title: '合伙人',
          align: 'center',
          width: '200px',
          scopedSlots: { customRender: '13' }
        },
        {
          title: '铂金',
          align: 'center',
          width: '200px',
          scopedSlots: { customRender: '12' }
        },
        {
          title: '钻石',
          align: 'center',
          width: '200px',
          scopedSlots: { customRender: '11' }
        },
        {
          title: '金牌',
          align: 'center',
          width: '200px',
          scopedSlots: { customRender: '10' }
        },
        {
          title: '普通',
          align: 'center',
          width: '200px',
          scopedSlots: { customRender: '9' }
        }
      ],
      tableData: [],
      planType: [],
      channelType: []
    }
  },
  created() {
    this.getType()
    this.getList()
  },
  methods: {
    async getType() {
      const { data } = await getPlanAPI({ brand_id: process.env.VUE_APP_BRAND_ID, search: {} })
      const channel = await getChannelAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
      this.channelType = channel.data
      this.planType = data
    },
    async getList() {
      try {
        this.loading = true
        const { data } = await getListInfoAPI(this.formData)
        this.tableData = data.list
      } finally {
        this.loading = false
      }
    },
    reset() {
      this.formData = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          channel_id: undefined,
          channel_type: undefined
        }
      }
      this.getList()
    },
    paginChange(value) {
      console.log(value)
      this.formData.page = value.current
      this.formData.page_size = value.pageSize
      this.getList()
    },
    async onChange() {
      const result = await getPlanAPI({
        brand_id: process.env.VUE_APP_BRAND_ID,
        search: { type: this.formData.search.channel_type }
      })
      this.planType = result.data
    },
    async editList(level_id, trade_fee, trade_rate, channel_id) {
      const send = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        channel_id: channel_id,
        level_id,
        trade_fee,
        trade_rate
      }
      try {
        const res = await editListInfoAPI(send)
        this.$message.success(res.msg)
        this.getList()
      } catch (error) {
        this.$message.error(error.data.msg)
        this.getList()
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-table-body {
  white-space: nowrap;
  width: 100%;
  overflow-x: auto;
  font-size: 14px;
}

/* 整个滚动条 */
/deep/ .ant-table-body::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}

/deep/ .ant-table-body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #1890ff;
}

/deep/ .ant-table-body::-webkit-scrollbar-track {
  border-radius: 1px;
  background: #f1f1f1;
}
.select {
  vertical-align: middle;
  margin-right: 10px;
  width: 200px;
}

.info {
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
}
.inputStyle {
  margin-left: 10px;
  width: 100px;
}
</style>
